<template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <Form class="p-4 enter-x" ref="formRef">
      <Result
        :status="ajaxResultState.Succeeded ? 'success' : 'error'"
        :title="
          ajaxResultState.Succeeded ? t('sys.login.confirmSuccess') : t('sys.login.confirmFailed')
        "
        :sub-title="
          ajaxResultState.Succeeded
            ? `${ajaxResultState.Data.UserName}[${ajaxResultState.Data.NickName}]${
                ajaxResultState.Data.Email === undefined ||
                ajaxResultState.Data.Email === null ||
                ajaxResultState.Data.Email === ''
                  ? ''
                  : `，${t('sys.login.activationEmail')}`
              }`
            : ajaxResultState.Content
        "
      >
        <template #extra>
          <a-button
            key="open"
            type="primary"
            :disabled="
              ajaxResultState.Data.Email === undefined ||
              ajaxResultState.Data.Email === null ||
              ajaxResultState.Data.Email === ''
            "
            @click="() => openMailSite(ajaxResultState.Data.Email)"
          >
            {{ t('sys.login.viewMailbox') }}
          </a-button>
          <a-button key="back" @click="handleBackLogin"> {{ t('sys.login.backSignIn') }} </a-button>
        </template>
      </Result>
      <div class="result-success__content" v-if="ajaxResultState.Succeeded">
        <Descriptions>
          <DescriptionItem>{{ '' }}</DescriptionItem>
        </Descriptions>
      </div>
      <div class="result-error__content" v-if="!ajaxResultState.Succeeded">
        <Descriptions>
          <DescriptionItem>{{ '' }}</DescriptionItem>
        </Descriptions>
        <div class="result-error__content-title"> {{ t('sys.login.confirmFailed') }}： </div>
        <div class="mb-4">
          <CloseCircleOutlined class="mr-2 result-error__content-icon" />
          {{ ajaxResultState.Content }}
          <a class="ml-4" @click="handleBackLogin">{{ t('sys.login.backSignIn') }} ></a>
        </div>
      </div>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, computed } from 'vue';

  import LoginFormTitle from './LoginFormTitle.vue';
  import { Form, Result, Descriptions } from 'ant-design-vue';
  import { CloseCircleOutlined } from '@ant-design/icons-vue';

  import { useI18n } from '@/hooks/web/useI18n';
  import { useLoginState, LoginStateEnum } from './useLogin';

  import { openMailSite } from '@/utils/common';

  const DescriptionItem = Descriptions.Item;

  const { t } = useI18n();
  const { handleBackLogin, getLoginState, getAjaxResultState } = useLoginState();

  const formRef = ref();
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.CONFIRM_RESULT);
  const ajaxResultState = computed(() => unref(getAjaxResultState));
</script>

<style lang="less" scoped>
  .result-error {
    padding: 48px 32px;
    background-color: @component-background;

    &__content {
      padding: 24px 40px;
      background-color: @background-color-light;

      &-title {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 500;
      }

      &-icon {
        color: #ff4d4f;
      }
    }
  }
</style>
